<template>
  <el-dialog v-model="dialogVisible" title="文件详情" width="600px" class="file-info-dialog" top="5vh">
    <component 
      :is="detailComponent"
      :file-info="fileInfo"
      :folder-info="folderInfo"
    />

    <template #footer>
      <el-button-group>
        <el-button 
          type="primary" 
          @click="handlePreview" 
          v-if="isPreviewable"
          v-permission="'system:oss:doPreview'"
          :icon="ZoomIn"
          style="margin-right: 10px"
        >
          预览
        </el-button>
        <el-button 
          type="primary" 
          @click="handleDownload" 
          v-if="fileInfo?.url" 
          v-permission="'system:oss:doDownload'"
          :icon="Download"
        >
          下载
        </el-button>
      </el-button-group>
    </template>

    <!-- 使用统一的预览组件 -->
    <PreviewDialog
      v-model:visible="previewVisible"
      :url="previewUrl"
      :type="previewType"
      :title="fileInfo?.name"
    />
  </el-dialog>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { Download, ZoomIn } from '@element-plus/icons-vue'
import BaseFileDetails from './details/BaseFileDetails.vue'
import ImageFileDetails from './details/ImageFileDetails.vue'
import VideoFileDetails from './details/VideoFileDetails.vue'
import AudioFileDetails from './details/AudioFileDetails.vue'
import FolderDetails from './details/FolderDetails.vue'
import PreviewDialog from './PreviewDialog.vue'
import type { FileInfo, FolderInfo } from '../types'
import { isPreviewableType } from '../types'
import { getDownloadUrl } from '/@/api/oss'

const props = defineProps<{
  modelValue: boolean
  fileInfo: FileInfo | null
  folderInfo: FolderInfo | null
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', value: boolean): void
}>()

const dialogVisible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

// 预览相关状态
const previewVisible = ref(false)
const previewUrl = ref('')
const previewType = ref('')

// 判断是否可预览
const isPreviewable = computed(() => {
  if (!props.fileInfo) return false
  return isPreviewableType(props.fileInfo.type, props.fileInfo.extension)
})

// 动态选择详情组件
const detailComponent = computed(() => {
  if (props.folderInfo) {
    return FolderDetails
  }
  if (props.fileInfo?.type === 'images') {
    return ImageFileDetails
  }
  if (props.fileInfo?.type === 'videos') {
    return VideoFileDetails
  }
  if (props.fileInfo?.type === 'audios') {
    return AudioFileDetails
  }
  return BaseFileDetails
})

// 处理预览
const handlePreview = () => {
  if (props.fileInfo && isPreviewable.value) {
    previewUrl.value = props.fileInfo.url
    previewType.value = props.fileInfo.type
    previewVisible.value = true
  }
}

// 处理下载
const handleDownload = async () => {
  if (props.fileInfo) {
    try {
      const { data } = await getDownloadUrl(props.fileInfo.path)
      const response = await fetch(data.url)
      const blob = await response.blob()
      const blobUrl = window.URL.createObjectURL(blob)
      
      const a = document.createElement('a')
      a.href = blobUrl
      a.download = data.file_name
      document.body.appendChild(a)
      a.click()
      document.body.removeChild(a)
      window.URL.revokeObjectURL(blobUrl)
    } catch (error) {
      ElMessage.error('下载失败')
    }
  }
}
</script>

<style scoped lang="scss">
.file-info-dialog {
  :deep(.el-dialog__body) {
    padding-top: 0;
  }
}
</style> 